<template>
<div class="app-container">
    <loading v-show="loading"></loading>
    <el-card class="box-card" style="margin-bottom:1%;">
      <div slot="header" class="clearfix">
        <span>考核周期基本信息</span>
        <div class="btn-box">
        <el-button
              size="mini"
              type="primary"
              @click="$router.back(-1)" style="margin-right:20px;">返 回</el-button>
        </div>
      </div>
      <el-form ref="detailData"  :model="detailData" label-width="140px" class="detailStyle">
        <el-row>
          <el-col :span="12">
            <span class="labelSpan">
              考核周期名称:
            </span>
            <span class="valueSpan">{{detailData.assessmenCycle}}</span>
          </el-col>
          <el-col :span="12">
            <span class="labelSpan">考核周期起始时间: </span>
            <span class="valueSpan">{{detailData.assessmenBeginTime}} -- {{detailData.assessmenEndTime}}</span>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-bottom:1%;">
        <div slot="header" class="clearfix">
          <span>考核部门列表</span>
        </div>
        <el-table
          :data="details"
          border
          max-height="450"
          ref="tableData"
          style="width: 100%;margin-bottom:1%;"
          >
          <el-table-column
            label="部门名称"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.partyOrgName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="部门类型"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.partyOrgType }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-document"
                @click="starReport(scope.$index, scope.row)">开始考核</el-button>
              </template>
          </el-table-column>
        </el-table>
      </el-card>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import { getSelfReported } from '@/api/partyBranch/nextReportedList'
export default {
  components: {
    Loading
  },
  data() {
    return {
      searchData: {
        cycleAssessmenKey: ''
      },
      num: 0,
      loading: false,
      detailData: {
        assessmenBeginTime: '',
        assessmenCycle: '',
        assessmenEndTime: '',
        createTime: '',
        cycleAssessmenKey: '',
        modifyTime: '',
        releaseState: ''
      },
      details: []
    }
  },
  created() {
    this.loading = true
    this.searchData.cycleAssessmenKey = this.$route.query.cycleAssessmenKey
    this.getgetSelfReportedList()
  },
  methods: {
    getgetSelfReportedList() {
      getSelfReported(this.searchData).then(response => {
        this.detailData = response.data.entity
        this.details = response.data.partyOrgs
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    starReport(index, row) {
      this.$router.push({
        path: 'nextReported',
        name: '下级考核',
        query: {
          cycleAssessmenKey: this.detailData.cycleAssessmenKey,
          partyOrgKey: row.partyOrgKey
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item{margin-bottom:0;}

</style>
